<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>现场查勘</title>
</head>
<body>
	<div id="">
		<h1 align="center">现场查勘</h1>
	<form action="" method="post">
		
		<table style="margin: 0 auto;" border="1" bordercolor="#3AB2FF" cellspacing="3" cellpadding="5">
			<tr>
				<td align="right">报案人：</td>
				<td><input type="text" name="reportName" id="" /></td>
				<td align="right">出险驾驶员：</td>
				<td><input type="text" name="driverName" id="" /></td>
			</tr>
			<tr>
				<td align="right">准驾车型：</td>
				<td>
					<select id=""name="carType" style="width: 80%;">
						<option value="1">大客车</option>
						<option value="2">货车</option>
						<option value="3">小汽车</option>
						<option value="4">摩托车</option>
						<option value="5">面包车</option>
					</select>
				</td>
				<td align="right">出险驾驶员电话：</td>
				<td><input type="text" name="driverTel" id="" /></td>
			</tr>
			<tr>
				<td align="right">查勘地点：</td>
				<td>
					<select id=""name="surveyAddress" style="width: 50%;">
						<option value="1">第一现场</option>
						<option value="2">第二现场</option>
						<option value="3">第三现场</option>
					</select>
				</td>
				<td align="right">出险原因：</td>
				<td>
					<select id=""name="dangerReason" style="width: 45%;">
						<option value="1">-请选择-</option>
						<option value="人为">人为</option>
						<option value="天灾">天灾</option>
						<option value="意外">意外</option>
					</select>
				</td>
			</tr>
			<tr>
				<td align="right">出险地点：</td>
				<td colspan="3">
      		<input type="text" name="dangerAddress" id=""/>
				</td>
			</tr>
			<tr>
				<td align="right">出险区域：</td>
				<td colspan="3">
					<input type="radio" name="dangerArea" value="市内"/>市内
					<input type="radio" name="dangerArea" value="省内"/>省内
					<input type="radio" name="dangerArea" value="省外"/>省外
					<input type="radio" name="dangerArea" value="境外"/>境外
				</td>
			</tr>
			<tr>
				<td align="right">道路信息：</td>
				<td colspan="3">
					<input type="radio" name="roadInfo" value="高速公路"/>高速公路
					<input type="radio" name="roadInfo" value="普通公路"/>普通公路
					<input type="radio" name="roadInfo" value="市区道路"/>市区道路
					<input type="radio" name="roadInfo" value="乡村公路"/>乡村公路
					<input type="radio" name="roadInfo" value="庭院车场"/>庭院车场
					<input type="radio" name="roadInfo" value="其它"/>其它
				</td>
			</tr>
			<tr>
				<td align="right">出险经过：</td>
				<td colspan="3">
					<textarea id="" name="dangerThrough" style="width: 90%;height: 80px;font-size: 18px;"></textarea>
				</td>
			</tr>
			<tr>
				<td align="right">查勘意见：</td>
				<td colspan="3">
					<textarea id="" name="surveyOpinion" style="width: 90%;height: 80px;font-size: 18px;"></textarea>
				</td>
			</tr>
			<!--多图上传-->
			<tr>
				<td align="right">添加照片：</td>
				<td colspan="3" style="position: relative;">
					<input type="file" name="img" id="one" onchange="mm(1)"/>&nbsp;&nbsp;&nbsp;
					<img src="img/tupian1.jpg" id="img1"/>
					<input type="file" name="img" id="two" onchange="mm(2)"/>&nbsp;&nbsp;&nbsp;
					<img src="img/tupian1.jpg" id="img2"/>
					<input type="file" name="img" id="three" onchange="mm(3)"/>
					<img src="img/tupian1.jpg" id="img3"/>
				</td>
			</tr>
			<tr>
				<td align="right">查勘员：</td>
				<td colspan="3"><input type="text" name="personnelName"/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;查勘机构：
				<input type="text" name="companyName"/>
				查勘时间：
				<input type="date" name="surveyTime"/></td>
			</tr>
			<tr><td align="center" colspan="4">
				<input type="submit" value="保 存"/>&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="reset" value="重 置" onclick="resets()"/>
			</td></tr>
		</table>
	</form>
 </div>
 
 
 	<style type="text/css">
 		input[type="submit"]{
 			width: 10%;
 			height: 35px;
 			font-size: 18px;
 		}
 		input[type="reset"]{
 			width: 10%;
 			height: 35px;
 			font-size: 18px;
 		}
 		input[type="file"]{
 			width: 15%;
 			height: 140px;
 			opacity: 0;
 		}
 		
 		img:nth-of-type(1){
 			width: 15%;
 			height: 140px;
 			position: absolute;
 			left: 0.4%;
 			bottom: 3px;
 			border: 1px solid;
 			z-index: -1;
 		}
 		img:nth-of-type(2){
 			width: 15%;
 			height: 140px;
 			position: absolute;
 			left: 17.6%;
 			bottom: 3px;
 			border: 1px solid;
 			z-index: -1;
 		}
 		img:nth-of-type(3){
 			width: 15%;
 			height: 140px;
 			position: absolute;
 			left: 34.7%;
 			bottom: 3px;
 			border: 1px solid;
 			z-index: -1;
 		}
 	</style>
 	
 	
 	<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
 	<script>
 		function resets() {
 			$("#img1").attr("src","img/tupian1.jpg");
 			$("#img2").attr("src","img/tupian1.jpg");
 			$("#img3").attr("src","img/tupian1.jpg");
 		}
 		
 		function mm (code) {
 			var a = document.getElementById("one");
 			var b = document.getElementById("two");
 			var c = document.getElementById("three");
 			if(code == 1){
 				ii(a,code);
 			}else if (code == 2) {
 				ii(b,code);
 			}else{
 				ii(c,code);
 			}
 		}

		function ii(obj,codes){
			//解决文件路径C:\fakepath问题
    		var oFReader = new FileReader();
    		var file =obj.files[0];
    		oFReader.readAsDataURL(file);
    		
    		oFReader.onloadend = function(oFRevent){
	        	var src = oFRevent.target.result;
//	        	alert(src);
	        	if(codes == 1){
	        		$('#img1').attr('src',src);
	        	}
	        	if (codes == 2) {
	        		$('#img2').attr('src',src);
	        	}
	        	if (codes == 3) {
	        		$('#img3').attr('src',src);
	        	}
    		}
    	}
 	</script>
 	
 	
</body>
</html>